<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide('formValidate')"
      :mask-closable="false"
      width="80vw"
    >
      <Card :bordered="false" :style="{ marginBottom: '10px' }">
        <div class="hs-screen-row">
          <Input
            v-model.trim="params.factoryCode"
            placeholder="请输入工厂编码"
          />
        </div>

        <div class="hs-screen-row">
          <Button type="primary" @click="queryProgramList">查询</Button>
        </div>
        <div class="hs-screen-row">
          <Button @click="resetScreen">重置</Button>
        </div>
      </Card>

      <Card :bordered="false" :style="{ marginBottom: '10px' }">
        <!--标题-->
        <div slot="title">
          <div class="hs-screen-box">
            <div>工厂列表</div>
          </div>
        </div>
        <!--表格数据-->
        <Table
          row-key="goodsMallTypeId"
          :columns="columns"
          :data="data"
          size="small"
          :stripe="true"
          :loading="isTableLoading"
          highlight-row
          @on-row-click="selectRow"
        >
          <template slot-scope="{ row }" slot="isUse">
            <template v-if="row.isUse == 1">是</template>
            <template v-else>否</template>
          </template>
        </Table>
        <!--分页-->
        <div class="hs-page">
          <Page
            :total="total"
            show-sizer
            show-total
            transfer
            @on-change="changePage"
            @on-page-size-change="changePageSize"
          />
        </div>
      </Card>

      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button type="primary" :loading="loadingBtn" @click="submitHandle">
          <span v-if="!loadingBtn">绑定工厂</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { omitBy } from 'lodash';

  export default {
    name: 'factory-select',
    data() {
      return {
        loadingBtn: false,
        isShowModal: false,
        title: '选择工厂',
        total: 0,
        isTableLoading: false,
        // 参数
        params: {
          factoryCode: '',
          poiName: '',
          page: 1,
          rows: 10
        },
        // 表格列
        columns: [
          {
            title: '工厂名称',
            minWidth: 200,
            key: 'poiName'
          },
          {
            title: '工厂编码',
            minWidth: 70,
            key: 'factoryCode'
          },
          {
            title: '省',
            minWidth: 50,
            key: 'province'
          },
          {
            title: '市',
            minWidth: 50,
            key: 'city'
          },
          {
            title: '县',
            minWidth: 50,
            key: 'county'
          },
          {
            title: '地址',
            minWidth: 180,
            key: 'address'
          },
          {
            title: '电话',
            minWidth: 120,
            key: 'mobile'
          },
          {
            title: '收件联系人',
            minWidth: 120,
            key: 'contact'
          },
          {
            title: '是否使用',
            minWidth: 70,
            slot: 'isUse'
          }
        ],
        // 表格数据
        data: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '系统管理', url: '', icon: '', size: 0 },
          { name: '工厂管理', url: '', icon: '', size: 0 }
        ],
        poiData: {},
        currentFactory: {}
      };
    },
    methods: {
      resetScreen() {
        this.params = {
          factoryCode: '',
          poiName: '',
          page: 1,
          rows: 10
        };
        this.queryProgramList();
      },
      show(row) {
        this.poiData = row;
        this.isShowModal = true;
        this.queryProgramList();
      },
      hide() {
        this.isShowModal = false;
      },
      selectRow(row) {
        console.log(row);
        this.currentFactory = row;
      },
      queryProgramList() {
        this.isTableLoading = true;
        const params = omitBy(
          this.params,
          value => value === '' || value === null
        );
        this.axios
          .post('/factory/findList', params)
          .then(res => {
            if (res.status == 200) {
              this.total = res.data.total;
              this.data = res.data.rows;
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查工厂列表接口报错',
                duration: 0
              });
            }
          })
          .finally(() => {
            this.isTableLoading = false;
          });
      },
      changePage(e) {
        this.params.page = e;
        this.queryProgramList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.queryProgramList();
      },
      submitHandle() {
        // /poi/bindFactory
        const params = {
            factoryCode: this.currentFactory.factoryCode,
        //   factoryId: this.currentFactory.id,
          poiId: this.poiData.id,
          poiType: this.poiData.poiType
        };

        this.axios
          .post('/poi/bindFactory', {}, { params })
          .then(res => {
            this.$Message.success('操作成功.');
            this.$emit('confirm');
          })
          .finally(() => {
            this.isShowModal = false;
          });
      }
    }
  };
</script>

<style scoped></style>
